/* carbon.css */
/* ===================== 탄소 관련 ===================== */

/* 아래첨자 */
.SNB .SNB--view--panel.view--panel02 .view--panel02--cont .view--panel02--item .flex-data-item dl dd sub {
  font-size: 1.2rem;
  vertical-align: 2px;
}

.SNB .SNB--view--panel.view--panel02 .carbon-btn {
  background: #64940e;
  color: #fff;
  width: 100%;
  height: 3.2rem;
  border-radius: 1.6rem;
}

.SNB .SNB--view--panel.view--panel02.cabsDiSubPannel .view--panel02--cont {
  height: calc(100vh - 80px - 57px)
}

.SNB .SNB--view--panel.view--panel02.csaveDiSubPannel .view--panel02--cont {
  height: calc(100vh - 80px - 57px)
}


.SNB .SNB--view--panel.view--panel02.cLandDiSubPannel .view--panel02--cont {
  height: calc(100vh - 80px - 57px)
}

/* 다른 동네와 비교하기 팝업 화면 전체 */

#carbonComparison .village--item--data dl {
	min-height: 7.65rem;
}

#carbonComparison .modal--content--inner {
	max-height: 75rem;
	/* height: 100%; */
}

#carbonComparison .village-item-inner {
	height: 100%;
}

#carbonComparison .simplebar-content {
	height: 100%;
}

/* 다른 동네와 비교하기 팝업 화면 전체(끝) */

.modal-chart-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 12px; /* 차트 간 간격 */
}
    

/* 동네 비교하기 차트 크기 조정 */
.modal-chart-area--small {
  min-height: auto !important;
  height: 360px !important;
  width: 100%;
}


/* 공통 범례 스타일 */
.legend-bar {
  text-align: center;
}
.legend-bar .legend-gradient {
  height: 20px;
  border-radius: 10px;
  margin: 0.4rem auto;
}
.legend-bar .legend-labels {
  display: flex;
  justify-content: center;
  font-size: 1.2rem;
  color: #333;
/*   padding: 0 0.4rem; */
}
.legend-bar .legend-labels span {
  flex: 1;
  text-align: center;
  min-width: 4.2rem;
  word-break: keep-all;
}
.legend-bar .unit {
  margin-top: 0.4rem;
  font-size: 1.2rem;
  color: #555;
}

/* PDF 캡처용 select 스타일 */
.select-center-hide-arrow {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	background: #fff !important;
	text-align: center !important;
	text-align-last: center !important;
	-moz-text-align-last: center !important;
	-ms-text-align-last: center !important;
	padding-top: 10px !important;
	padding-right: 10px !important;
}



/* 동네 비교하기 버튼 */
.btn-other-compare {
  padding: 3px 10px; /* 버튼 크기 조정 */
  background-color: #4CAF50; /* 버튼 배경색 */
  color: white; /* 글자 색 */
  border: none; /* 버튼 테두리 제거 */
  border-radius: 5px; /* 버튼 모서리 둥글게 */
  cursor: pointer; /* 커서 포인터로 변경 */
  margin-left: 10px; /* 왼쪽 여백 추가 */
}

.btn-other-compare:hover {
  background-color: #367c39; /* 호버 시 약간 어두운 녹색으로 변경*/
}

.btn-other-compare:active {
  background-color: #2e6630; /* 클릭 시 더 어두운 녹색으로 변경*/
}

.land_unit {
	font-size : 1.3rem;
}

@media (max-width: 768px) {
  .carbon-compare {
		display: none;
	}
}

/* ===================== 탄소흡수 관련 ===================== */

/* 탄소흡수 지도 비오톱 */
.legend-bar.carbon-abs-biotop .legend-gradient {
  background: linear-gradient(to right,
    #ad6e31 0%,
    #eeb800 25%,
    #fdf400 50%,
    #84b52a 75%,
    #004f00 100%);
}

/* 탄소흡수 지도 10m격자 */
.legend-bar.carbon-abs-10 .legend-gradient {
  background: linear-gradient(to right, #FF0000 0%, #F26363 20%, #A6E3AA 60%, #064D21 100%);
}

/* 탄소흡수 지도 엽면적지수 */
.legend-bar.carbon-abs-Lfar .legend-gradient {
  background: linear-gradient(to right,
    #1F78B4 0%,    /* 밝은 하늘색: 낮은 LAI */
    #1F78B4 25%,   /* 파랑 */
    #B2DF8A 50%,   /* 연두 */
    #33A02C 75%,   /* 진녹색 */
    #E31A1C 100%   /* 진한 빨강: 높은 LAI */
  );
}

/* 탄소흡수 지도 태양복사량 */
.legend-bar.carbon-abs-sun .legend-gradient {
  background: linear-gradient(to right, #68D0F1 20%, #BFFD76 40%, #18E91A 65%, #F5FE8A 80%, #FF1601 100%);
}

/* 탄소흡수 지도 GPP */
.legend-bar.carbon-abs-gpp .legend-gradient {
  background: linear-gradient(to right,
    #28bceb 5%,     /* Light Blue */
    #a4fc3c 30%,    /* Lime Green */
    #fb7e21 60%,    /* Orange */
    #7a0403 100%    /* Deep Red */
  );
}

/* 탄소흡수 지도 NPP */
.legend-bar.carbon-abs-npp .legend-gradient {
    background: linear-gradient(to right,
    #8F6F46 0%,    /* Low */
    #B1A563 25%,   /* Moderate */
    #C3CD7D 50%,   /* Mid-High */
    #8EA97C 75%,   /* High */
    #4C807A 100%   /* Very High */
  );
  	
}

/* 탄소흡수 차트 바운더리 */
.cabsDiSubPannel .view--panel02--cont .view--panel02--item .chart-area {
	height: 250px;
	border: solid 1px #c8c8c8;
	border-radius: 15px;
}

/* 탄소흡수 equal */
#carbonComparison .modal--content .village--item--data dl dd .equal {
    position: relative;
    display: inline-block;
    font-size: 1.3rem;
    color: #2F9D27;
    text-align: right;
    font-weight: normal;
}

#carbonComparison .village--item--data dl dd {
	width: 200px;
}


.tb-carbon-biotop {
  width: auto; 
  /* border-collapse: collapse; */ /* 테이블 셀 간 간격 제거 */
}

.tb-carbon-biotop tr {
  height: 30px;
}

.tb-carbon-biotop td {
  padding-left: 10px;
  border-radius: 5px;
}

.tb-carbon-biotop td:first-child {
  width: 150px;
  background-color: #EDEDED;
}

.tb-carbon-biotop td:nth-child(2) {
  text-align: center;
  width: auto;
  background-color: #E7E6E6;
}


.SNB.carbon-type .SNB--view--panel.view--panel02 .view--panel02--cont .view--panel02--item--ti:last-child {
    margin-bottom: 0;
}

/* ===================== 탄소저장 관련 ===================== */

/* 탄소저장 지도 비오톱 */
.legend-bar.carbon-save-biotop .legend-gradient {
  background: linear-gradient(to right,
    #d7eeeb 0%,   /* 낮음 */
    #b8d7d4 25%,
    #92bbb7 50%,
    #679a97 75%,
    #1c625e 100%  /* 높음 */
  );
}

/* 탄소저장 지도 10m격자 */
.legend-bar.carbon-save-10 .legend-gradient {
  background: linear-gradient(to right, #FFFFFF 0%,#D5EFCF 20%, #9ED798 40%, #55B567 60%, #1D8641 80%, #00441B 100%);
}

/* 탄소저장 지도 층위 구조 지도 (도함수)*/
.legend-bar.carbon-save-dfc .legend-gradient {
   background: linear-gradient(to right,
    #ff9090 0%,    /* 0 - 연한 코랄핑크 */
    #fcd65d 25%,   /* 5 - 살구 */
    #f7f37d 50%,   /* 10 - 노랑 */
    #a2f5b5 75%,   /* 20 - 민트 */
    #b2e3f7 100%   /* 30 - 연한 하늘색 */
  );
}

/* 탄소저장 지도 층위 구조 지도 (절대높이)*/
.legend-bar.carbon-save-agl .legend-gradient {
 background: linear-gradient(to right, #FFFFFF 0%, #F9FDC7 10%, #EDF958 20%, #C4F958 30%, #9FD03C 40%, #77A762 50%, 
 #B9D8DC 60%, #99C7CC 70% ,#B87272 80% ,#902222 90%, #000000 100%);
}


.csave-legend-item {
    justify-items: center;
    align-content: center;
}
.csave-legend-div {
	width: 60%;
    height: 60%;
    border-radius: 20px;
    display: block;
}

.csave-fclt-3 {
	background-color: #e8f5e9; /* 아주 연한 연두 */
}
.csave-fclt-6 {
	background-color: #c8e6c9;
}
.csave-fclt-9 {
	background-color: #a5d6a7;
}
.csave-fclt-12 {
	background-color: #81c784;
}
.csave-fclt-15 {
	background-color: #4caf50; /* 중간 녹색 */
}
.csave-fclt-18 {
	background-color: #388e3c;
}
.csave-fclt-21 {
	background-color: #2e7d32;
}
.csave-fclt-24 {
	background-color: #1b5e20;
}
.csave-fclt-27 {
	background-color: #0d3b15;
}
.csave-fclt-30 {
	background-color: #021707; /* 거의 검정에 가까운 짙은 초록 */
}


/* 탄소저장 지도 수목 높이 지도*/
.legend-bar.carbon-save-treeHei .legend-gradient {
 background: linear-gradient(to right, #001219 0%, #005f73 15%, #0a9396 30%, #e9d8a6 45%, #ca6702 60%, #ae2012 75%, #9b2226 100%);
}


/* 탄소저장 지도 관목 피도 지도*/
.legend-bar.carbon-save-shubs .legend-gradient {
 background: linear-gradient(to right,
    #21839f 0%,
    #1ac3b1 25%,
    #ffcd7d 60%,
    #fe777c 100%
  );
}

/* 탄소저장 지도 아교목 피도 지도*/
.legend-bar.carbon-save-smtr .legend-gradient {
 background: linear-gradient(
    to right, 
    #ff5722 15%,   /* 0 - 0.2 */
    #fdd835 40%,   /* 0.2 - 0.6 */
    #4caf50 75%,   /* 0.6 - 0.8 */
    #1b5e20 100%   /* 0.8 - 1 */
  );
}

/* 탄소저장 지도 교목 피도 지도*/
.legend-bar.carbon-save-tree .legend-gradient {
  background: linear-gradient(to right, 
    #aa5656 15%, 
    #c07568 30%, 
    #ca9373 45%,  
    #ebcc89 60%,  
    #c0d499 75%, 
    #7cd1be 100%
  );
}

/* 탄소저장 지도 대교목 피도 지도*/
.legend-bar.carbon-save-bgtr .legend-gradient {
	background: linear-gradient(to right,
		#fff9c4 0%,    /* 0.0001 ~ 0.123 옅은 노랑 */
		#ff7043 25%,   /* 0.123 ~ 0.386 주황 */
		#d32f2f 60%,   /* 0.386 ~ 0.68 빨강 */
		#512da8 100%   /* 0.68 ~ 1 보라 */
	    );
}

.csave-fclt-shrub {
	background-color: #F7FCB9;
}
.csave-fclt-glueTree {
	background-color: #78C679;
}
.csave-fclt-conduct {
	background-color: #6D9F9A;
}
.csave-fclt-archbishop {
	background-color: #B47654;
}

/* 탄소저장 지도 개체목 지도*/
.legend-bar.carbon-save-treeCnt .legend-gradient {
  background: linear-gradient(to right,
    #fef0d9 0%,     /* 연한 오렌지 */
    #c7e9c0 20%,    /* 연한 연두/민트 */
    #a6bddb 40%,    /* 연한 하늘색 */
    #fdb863 60%,    /* 진한 주황 */
    #e34a33 80%,    /* 붉은색 */
    #2b0000 100%    
  );
}


/* 탄소저장 차트 바운더리 */
.csaveDiSubPannel .view--panel02--cont .view--panel02--item .chart-area {
	height: 210px;
	border: solid 1px #c8c8c8;
	border-radius: 15px;
}

/* 수직 층위 유형 */
.tb-carbon-tree-knd {
  width: auto;
}

.tb-carbon-tree-knd td {
  padding: 3px; /* 내용과 셀 테두리 사이 간격 조정 */
}

/* 헤더 행 스타일 */
.tb-carbon-tree-knd tr:first-child {
  font-weight: bold;
  text-align: center;
}

/* 헤더 셀 스타일 */
.tb-carbon-tree-knd tr:first-child td {
  background-color: #EDEDED;
}

/* 첫 번째 열 스타일 */
.tb-carbon-tree-knd td:first-child {
  width: 150px;
}

/* 두 번째 열 스타일 */
.tb-carbon-tree-knd td:nth-child(2) {
  width: 100px;
  text-align: right;
}

/* 세 번째 열 스타일 */
.tb-carbon-tree-knd td:nth-child(3) {
  width: 100px;
  text-align: right;
}

/* 홀수 행 스타일*/
.tb-carbon-tree-knd tr:nth-child(odd) td {
  background-color: #FFFFFF;
}

/* 짝수 행 스타일*/
.tb-carbon-tree-knd tr:nth-child(even) td {
  background-color: #EDEDED;
}



/* 개체목 수 */
.tb-carbon-tree-cnt {
  width: auto;
}

.tb-carbon-tree-cnt td {
  padding: 1px; /* 내용과 셀 테두리 사이 간격 조정 */
}

/* 헤더 행 스타일 */
.tb-carbon-tree-cnt tr:first-child {
  font-weight: bold;
  text-align: center;
}

/* 헤더 셀 스타일 */
.tb-carbon-tree-cnt tr:first-child td {
  background-color: #EDEDED;
}

/* 모든 열 스타일 */
.tb-carbon-tree-cnt td {
  width: 150px;
}

/* 두 번째 열 스타일 (숫자 데이터) */
.tb-carbon-tree-cnt td:nth-child(2) {
  text-align: right;
}

/* 홀수 행 스타일*/
.tb-carbon-tree-cnt tr:nth-child(odd) td {
  background-color: #FFFFFF;
}

/* 짝수 행 스타일*/
.tb-carbon-tree-cnt tr:nth-child(even) td {
  background-color: #EDEDED;
}



/* ===================== 탄소토양 관련 ===================== */

/* 토양탄소저장 지도 레이어*/
.legend-bar.carbon-land-soil .legend-gradient {
  background: linear-gradient(to right, #EEF0BA 10%, #CBC394 30%, #967F5C 65%, #785A3E 100%);
}

/* 토양탄소저장 지도 10m 격자 레이어*/
.legend-bar.carbon-land-soil-10 .legend-gradient {
  background: linear-gradient(to right, #F9F871 5%, #FFC75F 20%, #FF9671 40%, #D800AA 60%, #1600FF 95%);
}

/* 미생물 탄소저장 지도 레이어*/
.legend-bar.carbon-land-mrcog .legend-gradient {
  background: linear-gradient(to right, #E03544 5%, #C46B3C 20%, #7E7D28 40%, #34A857 60%, #2E4CA8 80%);
}

/* 탄소분획 지도 레이어*/
.legend-bar.carbon-land-poc .legend-gradient {
  background: linear-gradient(to right, #CC59D1 20%, #50434F 35%, #B6A7B5 70%, #D64754 80%, #9C3300 100%);
}

/* 탄소취약성 지도 레이어*/
.legend-bar.carbon-land-vul .legend-gradient {
  background: linear-gradient(to right, #30123b 5%, #24c2e5 25%, #b1f936 50%, #f6c23a 70%, #f46717 90%, #7a0403 100%);
}

/* 탄소토양(저장) 차트 바운더리 */
.chart-area {
	height: 250px;
	border: solid 1px #c8c8c8;
	border-radius: 15px;
}

/* 미생물 탄소 및 미립유기탄소 테이블 */
.carbon-cast-flex-2 {
  display: flex;
  gap: 0.8rem;
}
.carbon-cast-flex-2 > dl {
  flex: 1;
  text-align: center;
  background: #f0f0f0;
  padding: 1.2rem;
  border-radius: 0.4rem;
}
@media (max-width: 768px) {
  .carbon-cast-flex-2 > dl {
    padding: 0.8rem;
  }
}
.carbon-cast-flex-2 > dl dt {
  color: #555555;
  margin-bottom: 0.5rem;
}
@media (max-width: 768px) {
  .carbon-cast-flex-2 > dl dt {
    font-size: 1.2rem;
  }
}
.carbon-cast-flex-2 > dl dd {
  color: #1d1d1d;
  font-weight: bold;
}
.carbon-cast-flex-2 > dl dd sub {
  vertical-align: top;
}
@media (max-width: 768px) {
  .carbon-cast-flex-2 > dl dd {
    font-size: 1.2rem;
  }
}

/* 범례 */
.carbon-icon-box {
	padding: 1rem;
}
.carbon-icon-item {
	display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-top: 1rem;
}
.carbon-icon-item:first-child {
    margin-top: 0;
}
.carbon-icon-start, .carbon-icon-end {
	width: 32px;
    height: 32px;
    background: no-repeat center / contain;
}

/* 미생물 탄소 저장 패널 */
.SNB .SNB--view--panel.view--panel02#mrcogCbnSave .view--panel02--cont {
	height: calc(100vh - 80px - 57px);
}

#clandDiPannel #mrcogCbnSave .view--panel02--cont .view--panel02--item .status-area {
	height: 80px;
	border: solid 1px #c6c6c6;
	border-radius: 15px;
}

#clandDiPannel #mrcogCbnSave .view--panel02--cont .view--panel02--item .chart-area {
	height: 220px;
	border: solid 1px #c6c6c6;
	border-radius: 15px;
}

/* END */



/* 탄소 배출 */
#carbonFeaturePopup-left {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 9999;
}

#carbonFeaturePopup-right {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
}

#disposeDiPannel .SNB--view--panel.view--panel02 .view--panel02--cont {
    height: calc(100vh - 80px - 57px)
}

/* 초기 상태 */
/* #panel-dispose.active, */
/* .SNB .SNB--view--panel.view--panel02.active { */
/*     display: block !important; */
/* } */

#panel-dispose.hidden {
  display: none !important;
}

.year-month-center {
  display: flex;
  justify-content: center;
  align-items: flex-start;  /* ← 상단 기준 정렬 */
  gap: 1.5rem;
  margin-top: 2rem;
}

#left-map-selector,
#right-map-selector {
  display: flex;
  gap: 0.8rem;
  margin-top: 2px;          /* ← 선택사항, 더 내려야 하면 여기를 조절 */
}

#left-map-selector select,
#right-map-selector select {
  min-width: 9rem;
  height: 40px;             /* 우측 select와 같은 높이로 맞추기 */
  padding: 6px 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: white;
}

/* 도로기반 범례 6개 이상 조정 */
.legend-bar.trsp-lv5-road .legend-labels,
.legend-bar.trsp-lv6-road .legend-labels,
.legend-bar.trsp-lv6 .legend-labels,
.legend-bar.bldg-elpwr-month .legend-labels {
  justify-content: space-between;
  font-size: 1.1rem;
}

.legend-bar.trsp-lv5-road .legend-labels span,
.legend-bar.trsp-lv6-road .legend-labels span,
.legend-bar.trsp-lv6 .legend-labels span,
.legend-bar.bldg-elpwr-month .legend-labels span {
  min-width: unset;
  text-align: center;
  word-break: keep-all;
}

/* 건물 - 전기 (연간) */
.legend-bar.bldg-elpwr-year .legend-gradient {
  background: linear-gradient(to right,
    #ffffe0,   /* 0~250 - 연노랑 */
    #c7e9b4,   /* 250~500 - 연녹색 */
    #7fcdbb,   /* 500~1000 - 시안 */
    #41b6c4,   /* 1000~2000 - 청록 */
    #2c7fb8,   /* 2000~3000 - 중청 */
    #bd0026    /* 3000+ - 강한 빨강 */
  );
}

/* 건물 - 전기 (월별) */
.legend-bar.bldg-elpwr-month .legend-gradient {
  background: linear-gradient(to right,
    #ffffe0,   /* 0~10 - 연노랑 */
    #c7e9b4,   /* 10~50 - 연녹색 */
    #7fcdbb,   /* 50~100 - 시안 */
    #41b6c4,   /* 100~300 - 청록 */
    #2c7fb8,   /* 300~1000 - 중청 */
    #253494,   /* 1000~3000 - 진청 */
    #bd0026    /* 3000+ - 강한 빨강 */
  );
}

/* 건물 - 가스 (연간) */
.legend-bar.bldg-gas-year .legend-gradient {
  background: linear-gradient(to right,
    #e0ecf4,   /* 0 ~ 17       - 밝은 청회색 */
    #9ebcda,   /* 17 ~ 76      - 푸른회색 */
    #8856a7,   /* 76 ~ 255     - 진한 보라 */
    #e34a33,   /* 255 ~ 765    - 오렌지레드 */
    #b30000,   /* 765 ~ 2000   - 진한 빨강 */
    #7f0000,   /* 2000 ~ 3000  - 진보라/갈색 */
    #662506    /* 3000+        - 짙은 갈색 */
  );
}

/* 건물 - 가스 (월별) */
.legend-bar.bldg-gas-month .legend-gradient {
  background: linear-gradient(to right,
    #e0ecf4,   /* 0 ~ 1     - 밝은 청회색 */
    #9ebcda,   /* 1 ~ 5     - 푸른회색 */
    #8856a7,   /* 5 ~ 20    - 진한 보라 */
    #e34a33,   /* 20 ~ 70   - 오렌지레드 */
    #662506    /* 70+       - 짙은 갈색 */
  );
}

/* 건물 - 난방 (연간) */
.legend-bar.bldg-hetng-year .legend-gradient {
  background: linear-gradient(to right,
    #fff7ec,   /* 0~1,000 - 연베이지 */
    #fdd49e,   /* 1,000~5,000 - 살구 */
    #fb9a29,   /* 5,000~20,000 - 오렌지 */
    #f768a1,   /* 20,000~50,000 - 자홍 */
    #ae017e,   /* 50,000~100,000 - 진한 자주 */
    #49006a    /* 100,000+ - 검보라 */
  );
}

/* 건물 - 난방 (월별) */
.legend-bar.bldg-hetng-month .legend-gradient {
  background: linear-gradient(to right,
    #fff7ec,   /* 0~50 - 연베이지 */
    #fdd49e,   /* 50~500 - 살구 */
    #fb9a29,   /* 500~5,000 - 오렌지 */
    #f768a1,   /* 5,000~20,000 - 자홍 */
    #ae017e,   /* 20,000~50,000 - 진한 자주 */
    #49006a    /* 50,000+ - 검보라 */
  );
}

/* 수송 - 도로 기반 */
.legend-bar.trsp-lv6 .legend-gradient {
  background: linear-gradient(to right,
    #e0f3f8,   /* 0~100 - 밝은 민트 */
    #a8ddb5,   /* 100~300 - 연청록 */
    #7bccc4,   /* 300~700 - 중청록 */
    #fdae61,   /* 700~1500 - 주황 */
    #f46d43,   /* 1500~3000 - 진한 주황 */
    #a50026    /* 3000+ - 강한 적갈색 */
  );
}

/* ② 헤더 색상: 탄소배출 전용 */
.modal--head.carbon {
    background: #388e3c;  /* 예시 색상: 탄소/환경 느낌의 녹색계열 */
}

/* ③ 아이템 강조 스타일: 탄소배출 전용 */
.village--item.first-carbon {
    border: 2px solid #388e3c;
}

.village--item.first-carbon .village--item--head h3 {
    color: #388e3c;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.village--item.first-carbon .village--item--head h3:after {
    display: inline-block;
    content: "";
    background-image: url("/gcs/assets/images/modal/ico-village.png");
    width: 1.5rem;
    height: 1.7rem;
}

.btn--primary.selected {
    background-color: #388e3c !important;
    border: 2px solid #2e7d32;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}

#carbonFirLocTotalCompare,
#carbonFirLocAreaCompare,
#carbonFirLocPerAreaCompare,
#carbonSecLocTotalCompare,
#carbonSecLocAreaCompare,
#carbonSecLocPerAreaCompare {
    position: relative;
    display: inline-block;
    font-size: 1.3rem;
    color: #2F9D27; /* 기본: 같음 */
    text-align: right;
    font-weight: normal;
    margin-left: 6px;
}

/* 탄소배출 건축물 에너지 소비현황 범례*/
.cdispose-legend-div {
  width: 60%;
  height: 60%;
  border-radius: 20px;
  display: block;
}

.cdispose-legend-item {
  justify-items: center;
  align-content: center;
}

/* 분위수 구간별 색상 */
.cdispose-con-1 {
  background-color: rgba(255, 0, 0, 1);      /* 상위 20% (빨강) */
}

.cdispose-con-2 {
  background-color: rgba(255, 165, 0, 1);    /* 20~50% (주황) */
}

.cdispose-con-3 {
  background-color: rgba(144, 238, 144, 1);  /* 50~70% (연녹색) */
}

.cdispose-con-4 {
  background-color: rgba(0, 128, 0, 1);      /* 70~100% (녹색) */
}

.cdispose-con-0 {
  background-color: rgba(200, 200, 200, 1);  /* 정보 없음 (회색) */
}

/* 팝업 컨테이너 */
.carbon-popup-dispose {
  display: none;
  position: fixed;
  width: 150px;
  top: 200px;
  left: 835px;
  transform: translate(-50%, -50%);
  z-index: 9999;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  font-family: 'pretendard', sans-serif;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* 탄소배출 등급 헤더 영역 */
.carbon-popup-dispose-header {
  color: #fff;
  text-align: center;
  padding: 13px 0;
  font-size: 15px;
  border-bottom: 1px solid #ccc; /* 제목 아래 줄 */
}

/* 탄소배출 등급 헤더 영역 */
.carbon-popup-dispose-header h3 {
  margin: 0;
  font-size: 15px;
  color: #333;
}

/* 탄소배출 등급 목록 전체 */
.carbon-popup-dispose-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 탄소배출 등급 각 항목 */
.carbon-popup-dispose-item {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #333;
  padding: 4px 0;
  border-bottom: 1px solid #e0e0e0;
}

/* 마지막 항목은 줄 제거 */
.carbon-popup-dispose-item:last-child {
  border-bottom: none;
}

/* 탄소배출 등급 색상 원 */
.carbon-dot-dispose {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-right: 8px;
  flex-shrink: 0;
}

/* 탄소배출 등급 범례 색상 (현재 dot 7, 6, 4, 3, 0)*/
.carbon-dot-dispose.dot-0 { background-color: #F2F2F2; }  /* 회색 */
.carbon-dot-dispose.dot-1 { background-color: #add8f6; }  /* 연파랑 */
.carbon-dot-dispose.dot-2 { background-color: #4682b4; }  /* 파랑 */
.carbon-dot-dispose.dot-3 { background-color: #5f9ea0; }  /* 청록 */
.carbon-dot-dispose.dot-4 { background-color: #3cb371; }  /* 녹색 */
.carbon-dot-dispose.dot-5 { background-color: #f4c542; }  /* 노랑 */
.carbon-dot-dispose.dot-6 { background-color: #f4a142; }  /* 주황 */
.carbon-dot-dispose.dot-7 { background-color: #d9534f; }  /* 빨강 */


#disposeRestoreSplitView {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: none;         
  align-items: center;
  height: 40px;
  padding: 6px 18px;
  font-size: 14px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  transition: background 0.15s, box-shadow 0.15s;
}

#disposeRestoreSplitView:hover {
  background: #f4f7fb;
  box-shadow: 0 4px 12px rgba(0,0,0,0.23);
}

.unit-inline {
  display: inline-block;
  white-space: nowrap;
}


/* 탄소배출 equal */
.carbonDispose .modal--content .village--item--data dl dd .equal {
    position: relative;
    display: inline-block;
    font-size: 1.3rem;
    color: #2F9D27;
    text-align: right;
    font-weight: normal;
}


.carbon-popup {
  position: absolute;
  top: 100px;
  left: 100px;
  width: 340px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  z-index: 1000;
}

.carbon-popup--inner {
  padding: 16px;
}

.carbon-popup--head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.carbon-popup--info {
  list-style: none;
  padding: 0;
  margin: 0 0 12px 0;
}

.carbon-popup--info li {
  font-size: 13px;
  margin-bottom: 4px;
}

.unit-inline {
  font-size: 12px;
  color: #666;
}

/* 탄소팝업에만 별도 그리드 스타일 적용 */
#disposeBldgPopup .layer--pop--dl--info {
    display: grid;
    grid-template-columns: 85px 1fr;
    align-items: start;
}


/* 탭 컨테이너 */
#popupChartTab {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 4px;
}

/* 탭 버튼 기본 스타일 */
#popupChartTab .tab-btn {
  flex: 1;
  padding: 8px 0;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-weight: 600;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

/* 활성 탭 스타일 (과하지 않게) */
#popupChartTab .tab-btn.active {
  color: #111;
  border-bottom-color: #64940e; /* 파란색 선으로 부드럽게 강조 */
  font-weight: 700;
}

/* 비활성 탭 호버 스타일 */
#popupChartTab .tab-btn:not(.active):hover {
  color: #0078d4;
  border-bottom-color: #a0c4ff;
}

/* 건물 배출량 패널로 이동 */
#disposeBldgDetailInfo .panel-title {
  font-size: 17px;
  font-weight: 700;
  color: #333;
  margin-bottom: 14px;
  border-left: 4px solid #64940e;
  padding-left: 10px;
}

#disposeBldgDetailInfo .panel-info-list {
  display: grid;
  grid-template-columns: 90px 1fr;
  row-gap: 6px;
  column-gap: 8px;
  margin-bottom: 18px;
}

#disposeBldgDetailInfo .panel-info-list dt {
  font-weight: 500;
  color: #555;
  font-size: 14px;
  line-height: 1.4;
}

#disposeBldgDetailInfo .panel-info-list dd {
  margin: 0;
  color: #222;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
}


/* 패널 상세정보 그리드 스타일 */
#disposeBldgDetailInfo .panel-info-list {
    display: grid;
    grid-template-columns: 90px 1fr;
    align-items: start;
    row-gap: 7px;
    column-gap: 8px;
    margin-bottom: 14px;
}
#disposeBldgDetailInfo .panel-row dt {
    font-weight: 500;
    color: #555;
}
#disposeBldgDetailInfo .panel-row dd {
    color: #222;
    margin-left: 0;
}

#panelChartTab {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 4px;
}

#panelChartTab .tab-btn {
  flex: 1;
  padding: 8px 0;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-weight: 600;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

#panelChartTab .tab-btn.active {
  color: #111;
  border-bottom-color: #64940e;
  font-weight: 700;
}

#panelChartTab .tab-btn:not(.active):hover {
  color: #0078d4;
  border-bottom-color: #a0c4ff;
}



/* 여기서부터 모바일 적용 */
@media (max-width: 768px) {
  #carbonFeaturePopup-left {
    left: 5px !important;
    right: auto !important;
    bottom: 160px !important;
    top: auto !important;
  }
  .year-month-center {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: auto;
    top: 130px;
    flex-direction: row;
    justify-content: center;
    padding: 0.8rem 0 0.6rem 0;
    min-height: 54px;
  }
  .year-month-center > div {
    margin: 0 0.7rem;
  }
  .year-month-center select {
    font-size: 1.1rem;
    min-width: 95px;
    margin: 0 2px;
    padding: 4px 16px 4px 8px;
    border-radius: 8px;
    border: 1px solid #ddd;
  }
  #disposeBldgPopup.layer--pop {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    z-index: 9999 !important;
    box-shadow: none !important;
    overflow-y: auto !important;
    background: #fff !important;
    /* padding: 0.8rem !important;  // 필요하면 유지 */
  }
  #disposeBldgPopup .layer--pop--head {
    border-radius: 0 !important;
    font-size: 1.2rem;
    padding: 1rem;
  }
  #disposeBldgPopup .layer--pop--body {
    padding: 1rem !important;
  }
}